<template>
  <a-dropdown placement="bottomRight">
    <a-avatar style="cursor: pointer" src="/favicon.ico"/>
    <template #overlay>
      <a-menu @click="handleMenuClick">
        <a-menu-item class="home-user-menu" key="1">
          <home-outlined/>
          个人主页
        </a-menu-item>
        <a-menu-item class="home-user-menu" key="2">
          <tool-outlined/>
          设置
        </a-menu-item>
        <a-divider style="margin: 5px 0;"/>
        <a-menu-item class="home-user-menu" @click="logoutRes" key="3">
          <poweroff-outlined/>
          退出
        </a-menu-item>
      </a-menu>
    </template>
    <a-button>
      Button
      <DownOutlined/>
    </a-button>
  </a-dropdown>
</template>

<script>
import {apiRequest, logout} from "@/service/service";
import {getCurrentInstance} from "vue";
import {useRouter} from "vue-router";

export default {
  name: "UserHead",
  setup() {
    const {proxy} = getCurrentInstance()
    const router = useRouter()
    /** 用户选项 **/
    const handleMenuClick = ({key}) => {
      // console.log(key)
    }

    /** 登出 **/
    function logoutRes() {
      apiRequest(logout(), response => {
        proxy.$Message.success("登出成功")
        sessionStorage.removeItem("token")
        localStorage.removeItem("userData")
        router.push({
          name: 'login'
        })
      })
    }

    return {
      handleMenuClick,
      logoutRes
    }
  }
}
</script>

<style>
.home-user-menu .anticon svg {
  margin: 0 10px
}
</style>
